<template>
  <el-dialog title="详情" v-model="visible" width="70%">
  <div class="product-page">
    <el-row>
      <el-col :span="8">
        <img :src="info.goodsCoverImg" alt="Product Image" class="product-image" />

        <el-carousel :interval="4000" type="card" height="150px" >
          <el-carousel-item v-for="(item, index) in fileList" :key="index">
            <img :src="item.url"  class="carousel-image" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="13" style="margin-left: 50px">
        <div class="product-info">
          <h2>商品名称：<span style="color: #1ab394">{{info.name}}</span> </h2>
          <h3>商品售价：¥ {{info.price}}</h3 >
          <h3>物料编码：{{info.code}}</h3 >
          <h3>商品规格：{{info.specs}}</h3 >
          <h3>商品单位：{{info.unit}}</h3 ><br>

          <h3> 购买数量 : <el-input-number v-model="searchParams.num" :min="1" label="购买数量"></el-input-number> </h3>

          <el-button @click="clickCart()" type="" style="height: 40px;width: 140px;margin-top: 30px;float: left;" plain>
            去结算
          </el-button>
<!--          <el-button @click="addShopCart(info.id)" type="success"  style="height: 40px;width: 140px;margin-top: 30px;float: left;">-->
<!--            添加购物车-->
<!--          </el-button>-->

        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div class="product-description">
      <h3>商品介绍</h3>
      <div class="description-content">
        <el-col :span="22" style="margin-left: 25px">
          <el-form-item  >

            <img v-for = "(item, index) in detailFileList "   :src="item.url"  alt="图片" style="width: 100%">

          </el-form-item>
        </el-col>

      </div>
    </div>
  </div>
  </el-dialog>
</template>



<script setup>
import { ref, reactive } from 'vue'
import { getGoodsInfo, addShopCartInfo} from "@/api/business/goodsInfo.js";

const { proxy } = getCurrentInstance();

const visible = ref(false)
const activeTab = ref('detail')
const activeCollapses = reactive(['1', '2', '3', '4'])
const info = reactive({})
const tableData = reactive([])
const fileList = ref([]);
const detailFileList = ref([]);
const router = useRouter();


const data = reactive({
  searchParams: {
    goodsId: null,
    num: 1,
  },
});

const { searchParams } = toRefs(data);

const init = (id) => {
    visible.value = true
    getGoodsInfo(id).then(res => {

      console.log("_____res.data____",res.data)

      fileList.value = [];
      res.data.goodsCoverImgList.forEach(url => fileList.value.push({url}));

      detailFileList.value = [];
      res.data.goodsDetailImgList.forEach(url => detailFileList.value.push({url}));

      Object.assign(info, res.data)

    })
}


/** 介入购物车 */
function addShopCart(id) {
  searchParams.value.goodsId = id;
  proxy.$modal.confirm('是否确认加入购物车？').then(function() {
    return addShopCartInfo(searchParams.value);
  }).then(() => {
    proxy.$modal.msgSuccess("加入成功");
  }).catch(() => {});

}

function clickCart(){
  visible.value = false;
  router.push({path: '/info/shoppingCartItem'});
}

defineExpose({
    init
});
</script>

<style scoped>
.product-page {
  padding: 20px;
}

.product-image {
  width: 100%;
  height: auto;
}

.product-info {
  margin-bottom: 20px;
}

.product-description {
  margin-top: 20px;
}

.description-content {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}
</style>


<style scoped>
.carousel-container {
  width: 80%;
  margin: 0 auto;
  padding: 20px 0;
}

.carousel-image {
  width: 70%;
  height: 70%;
  object-fit: cover;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 15px;
  text-align: center;
}

/* 自定义指示器样式 */
:deep(.el-carousel__indicator) {
  padding: 12px 4px;
}

:deep(.el-carousel__button) {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #909399;
}

/* 卡片式轮播图样式 */
:deep(.el-carousel__item--card) {
  width: 50%;
  transition: transform 0.4s ease-in-out;
}

:deep(.el-carousel__item--card.is-active) {
  transform: scale(1.1);
  z-index: 1;
}
</style>